<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: aquamarine;
            position: absolute;
            /* 使用动画 */
            /* animation: move 5s 1s infinite; */
            animation-name: move;
            animation-duration: 3s;
            animation-delay: 1s;
            /* 循环执行次数 n和infinite无穷次 */
            animation-iteration-count: infinite;
            animation-timing-function: steps(100);
            /* animation-play-state: paused;暂停 */
            /* animation-play-state: running;运行 */
            /* animation-fill-mode: forward;停留在结束状态 backwards走完动画停留在开始状态*/
            /* animation-direction: alternate; 往返 alternate-reverse反过来往返*/
            animation-direction: alternate-reverse;

        }
        @keyframes move{
            0%{
                left: 0;
            }
            30%{
                background-color: green;
            }
            70%{
                background-color: red;
            }
            100%{
                left: 93%;
            }
        }
        .bigbox{
            border: 1px solid #000;
            height: 100px;
            overflow: hidden;
        }
        .bigbox:hover .box{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <!-- transition 补间动画A~B 
     animation 帧动画 0% A B C ......100%-->
     <div class="bigbox"><div class="box"></div></div>
     
</body>
</html>